<template>
  <el-dialog
      class="thin_dialog"
      title="历史记录"
      v-model="visible"
      @close="closeDialog"
      width="500">

    <div class="setting_wrapper">
      <div>
        设置历史记录报存年限
        <el-select
            v-model="saveValue"
            class="m-2"
            placeholder="保存年限"
            style="width: 100px"
        >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <template #footer>
      <div class="btn_group">
        <el-button size="default" @click="closeDialog">取消</el-button>
        <el-button size="default" type="primary" @click="saveSetting">保存设置</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {setHisotryPeriod} from "../api/index.js";

export default {
  name: "historySetting",
  props:{
    show:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return {
      visible:this.show,
      saveValue:"365",
      options:[{
        label:"一年",
        value:"365"
      },{
        label:"6个月",
        value:"186"
      },{
        label:"3个月",
        value:"93"
      },{
        label:"1个月",
        value:"31"
      },{
        label:"1周",
        value:"7"
      },{
        label:"3天",
        value:"3"
      },{
        label:"不保存",
        value:"0"
      }]
    }
  },
  methods:{
    closeDialog(){
      this.$emit("sub_event",{act:"close_history_setting"});
    },
    saveSetting(){
      setHisotryPeriod({retentionPeriod:this.saveValue}).then(res => {
        if(res.code === 0){
          this.$message({
            message:"设置成功",
            type:"success"
          });
        }else{
          this.$message.error({
            message:res.msg
          });
        }
        this.$emit("sub_event",{act:"setting_save_value",value:this.saveValue});
      });

    }
  }
}
</script>

<style scoped>
  .setting_wrapper{
    padding:50px;
  }
  .btn_group{
    margin:0 20px 20px;
  }
</style>
